import React from 'react';
import { Card, CardContent, CardHeader, CardTitle } from '../ui/card';
import { Button } from '../ui/button';
import { Badge } from '../ui/badge';
import { 
  Users, 
  BookOpen, 
  GraduationCap, 
  Building,
  TrendingUp,
  AlertCircle,
  Activity,
  Server
} from 'lucide-react';

export function AdminDashboard() {
  return (
    <div className="space-y-6">
      {/* Welcome Section */}
      <div className="bg-gradient-to-r from-purple-500 to-purple-600 text-white p-6 rounded-lg">
        <h1 className="text-2xl font-medium mb-2">管理员控制台</h1>
        <p>系统运行正常，当前在线用户1,245人，今日新增选课记录567条</p>
      </div>

      {/* System Overview */}
      <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
        <Card>
          <CardContent className="p-6">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-muted-foreground">学生总数</p>
                <p className="text-2xl font-medium">12,485</p>
              </div>
              <GraduationCap className="h-8 w-8 text-blue-500" />
            </div>
            <p className="text-xs text-green-600 mt-2">+2.5% 较上月</p>
          </CardContent>
        </Card>
        
        <Card>
          <CardContent className="p-6">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-muted-foreground">教师总数</p>
                <p className="text-2xl font-medium">856</p>
              </div>
              <Users className="h-8 w-8 text-green-500" />
            </div>
            <p className="text-xs text-green-600 mt-2">+1.2% 较上月</p>
          </CardContent>
        </Card>
        
        <Card>
          <CardContent className="p-6">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-muted-foreground">开设课程</p>
                <p className="text-2xl font-medium">2,341</p>
              </div>
              <BookOpen className="h-8 w-8 text-orange-500" />
            </div>
            <p className="text-xs text-blue-600 mt-2">+15 本学期新增</p>
          </CardContent>
        </Card>
        
        <Card>
          <CardContent className="p-6">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-muted-foreground">院系数量</p>
                <p className="text-2xl font-medium">18</p>
              </div>
              <Building className="h-8 w-8 text-purple-500" />
            </div>
            <p className="text-xs text-muted-foreground mt-2">保持稳定</p>
          </CardContent>
        </Card>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        {/* System Status */}
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center">
              <Server className="mr-2 h-5 w-5" />
              系统状态
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="space-y-4">
              <div className="flex items-center justify-between p-3 bg-green-50 rounded-lg">
                <div className="flex items-center space-x-3">
                  <div className="w-3 h-3 bg-green-500 rounded-full"></div>
                  <div>
                    <p className="font-medium">数据库服务</p>
                    <p className="text-sm text-muted-foreground">响应时间: 12ms</p>
                  </div>
                </div>
                <Badge variant="secondary">正常</Badge>
              </div>
              
              <div className="flex items-center justify-between p-3 bg-green-50 rounded-lg">
                <div className="flex items-center space-x-3">
                  <div className="w-3 h-3 bg-green-500 rounded-full"></div>
                  <div>
                    <p className="font-medium">Web服务</p>
                    <p className="text-sm text-muted-foreground">CPU使用率: 45%</p>
                  </div>
                </div>
                <Badge variant="secondary">正常</Badge>
              </div>
              
              <div className="flex items-center justify-between p-3 bg-yellow-50 rounded-lg">
                <div className="flex items-center space-x-3">
                  <div className="w-3 h-3 bg-yellow-500 rounded-full"></div>
                  <div>
                    <p className="font-medium">文件存储</p>
                    <p className="text-sm text-muted-foreground">使用率: 78%</p>
                  </div>
                </div>
                <Badge variant="outline">注意</Badge>
              </div>
            </div>
          </CardContent>
        </Card>

        {/* Recent Activities */}
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center">
              <Activity className="mr-2 h-5 w-5" />
              系统活动
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="space-y-4">
              <div className="flex items-start space-x-3">
                <div className="w-2 h-2 bg-blue-500 rounded-full mt-2"></div>
                <div>
                  <p className="font-medium">批量导入学生信息</p>
                  <p className="text-sm text-muted-foreground">计算机学院 · 2024级新生 · 324人</p>
                  <p className="text-xs text-muted-foreground">1小时前</p>
                </div>
              </div>
              
              <div className="flex items-start space-x-3">
                <div className="w-2 h-2 bg-green-500 rounded-full mt-2"></div>
                <div>
                  <p className="font-medium">课程体系配置更新</p>
                  <p className="text-sm text-muted-foreground">新增人工智能专业课程15门</p>
                  <p className="text-xs text-muted-foreground">3小时前</p>
                </div>
              </div>
              
              <div className="flex items-start space-x-3">
                <div className="w-2 h-2 bg-orange-500 rounded-full mt-2"></div>
                <div>
                  <p className="font-medium">系统备份完成</p>
                  <p className="text-sm text-muted-foreground">数据库完整性检查通过</p>
                  <p className="text-xs text-muted-foreground">6小时前</p>
                </div>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>

      {/* Data Statistics */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center">
            <TrendingUp className="mr-2 h-5 w-5" />
            数据统计概览
          </CardTitle>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            <div className="text-center p-4 border rounded-lg">
              <h4 className="font-medium mb-2">今日选课</h4>
              <p className="text-2xl font-medium text-blue-600">567</p>
              <p className="text-sm text-muted-foreground">+23% 较昨日</p>
            </div>
            
            <div className="text-center p-4 border rounded-lg">
              <h4 className="font-medium mb-2">成绩录入</h4>
              <p className="text-2xl font-medium text-green-600">1,234</p>
              <p className="text-sm text-muted-foreground">本周累计</p>
            </div>
            
            <div className="text-center p-4 border rounded-lg">
              <h4 className="font-medium mb-2">在线用户</h4>
              <p className="text-2xl font-medium text-orange-600">1,245</p>
              <p className="text-sm text-muted-foreground">实时统计</p>
            </div>
            
            <div className="text-center p-4 border rounded-lg">
              <h4 className="font-medium mb-2">系统负载</h4>
              <p className="text-2xl font-medium text-purple-600">42%</p>
              <p className="text-sm text-muted-foreground">CPU使用率</p>
            </div>
          </div>
        </CardContent>
      </Card>

      {/* Quick Actions */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
        <Card className="cursor-pointer hover:shadow-md transition-shadow">
          <CardContent className="p-6 text-center">
            <Users className="h-8 w-8 mx-auto mb-3 text-blue-500" />
            <h4 className="font-medium mb-1">用户管理</h4>
            <p className="text-sm text-muted-foreground">添加、编辑用户信息</p>
          </CardContent>
        </Card>
        
        <Card className="cursor-pointer hover:shadow-md transition-shadow">
          <CardContent className="p-6 text-center">
            <BookOpen className="h-8 w-8 mx-auto mb-3 text-green-500" />
            <h4 className="font-medium mb-1">课程配置</h4>
            <p className="text-sm text-muted-foreground">管理课程体系设置</p>
          </CardContent>
        </Card>
        
        <Card className="cursor-pointer hover:shadow-md transition-shadow">
          <CardContent className="p-6 text-center">
            <TrendingUp className="h-8 w-8 mx-auto mb-3 text-orange-500" />
            <h4 className="font-medium mb-1">数据报表</h4>
            <p className="text-sm text-muted-foreground">查看详细统计数据</p>
          </CardContent>
        </Card>
        
        <Card className="cursor-pointer hover:shadow-md transition-shadow">
          <CardContent className="p-6 text-center">
            <AlertCircle className="h-8 w-8 mx-auto mb-3 text-red-500" />
            <h4 className="font-medium mb-1">系统设置</h4>
            <p className="text-sm text-muted-foreground">配置系统参数</p>
          </CardContent>
        </Card>
      </div>
    </div>
  );
}